import { colorLegend } from './colorLegend.js'
import { sizeLegend } from './sizeLegend.js'

const svg = d3.select('svg');

const g = svg.append('g')
  .attr('transform', `translate(100, 150)`);

const makeFruit = type => ({
  type,
  id: Math.random()  
});

let fruits = d3.range(5)
  .map(() => makeFruit('apple'));
  
let selectedFruit = null;

//点击事件
const setSelectedFruit = id => {
  selectedFruit = id;
  render();
}

const colorScale = d3.scaleOrdinal()
  .domain(['apple', 'lemon', 'orange', 'sweet potato'])
  .range(['red', 'lightgreen', 'orange', 'purple']);

const render = () => {
  colorLegend(g, {
    colorScale,
    spacing: 50,
    textOffset: 40,
    setSelectedFruit: setSelectedFruit,
    selectedFruit: selectedFruit
  });
}
  
const sizeScale = d3.scaleSqrt()
  .domain([0, 10])
  .range([0, 50]);

svg.append('g')
  .attr('transform', `translate(600, 150)`)
  .call(sizeLegend, {
    sizeScale,
    spacing: 40,
    textOffset: 10,
    numTicks: 5,
    circleFill: 'rbga(0,0,0,0.5)'
});

g.call(colorLegend, {
    colorScale,
    spacing: 50,
    textOffset: 40,
    setSelectedFruit: setSelectedFruit,
    selectedFruit: selectedFruit
});